<template>
  <div class="w-full h-full flex flex-col">
    <div ref="targetradar" class="flex-1"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'

// const props = defineProps({
//   xData: {
//     type: Array,
//     required: true
//   },
//   yData: {
//     type: Array,
//     required: true
//   },
//   title: {
//     type: String,
//     default: ''
//   },
//   subtext: {
//     type: String,
//     default: ''
//   },
//   topAll: {
//     type: Array,
//     default: () => []
//   }
// })

// 获取 dom 实例
const targetradar = ref(null)

// echarts 实例变量
let mChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
  mChart = echarts.init(targetradar.value)
  // 渲染 echarts
  renderChart()

  window.addEventListener('resize', screenAdapter)

})



const screenAdapter = () => {
  if (mChart) {
    mChart.resize()
  }
}

// 渲染图表
const renderChart = () => {

  let option = {
    tooltip: {
      trigger: 'item'
    },
    // legend: {
    //   top: '-5%',
    //   left: 'center'
    // },
    graphic: {
      type: 'circle',
      shape: {
        cx: '50%', // 中心点横坐标，百分比表示相对于容器宽度
        cy: '50%', // 中心点纵坐标，百分比表示相对于容器高度
        r: '20%'  // 半径，百分比表示相对于容器宽度或高度
      },
      style: {
        fill: 'red', // 中间背景色设置为白色
      },
    },
    series: [
      {
        name: '电池寿命',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'center',
          formatter: '{@[d]}' + "%",
          fontSize: 16
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 40, name: '已用寿命', itemStyle: { color: 'yellow' } },
          { value: 60, name: '剩余寿命', itemStyle: { color: 'red' } },

        ]
      }
    ]
  };

  mChart.setOption(option)

}


onBeforeUnmount(() => {
  window.removeEventListener('resize', screenAdapter)
})

// 监听数据的变化，重新渲染图表
// watch(
//   () => props.yData,
//   () => {
//     renderChart()
//   }
// )
</script>

<style lang="scss" scoped></style>
